<template>
   <div id="app">
     <!-- 代码 1：基础布局，24 等分 -->
     <h3>基础布局</h3>
     <el-row>
    <el-col :span="24">
        <div class="content red">:span="24"</div>
      </el-col>
      </el-row>
    <el-row>
       <el-col :span="12">
        <div class="content red">:span="12"</div>
      </el-col>
       <el-col :span="12">
        <div class="content green">:span="12"</div>
      </el-col>
       </el-row>
     <el-row>
       <el-col :span="8">
        <div class="content red">:span="8"</div>
      </el-col>
       <el-col :span="8">
        <div class="content green">:span="8"</div>
      </el-col>
       <el-col :span="8">
        <div class="content yellow">:span="8"</div>
      </el-col>
       </el-row>
     <h3>带间隔的分栏</h3>
     <!-- 代码 2：带间隔的分栏 -->
     <el-row :gutter="10">
       <!-- 代码 3：响应式分栏 xs,sm,md,lg,xl 类似于 Bootstrip 中的 -->
       <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
         <div class="content red">:gutter="10"</div>
         </el-col>
       <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
         <div class="content green"></div>
         </el-col>
       <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
         <div class="content yellow"></div>
         </el-col>
       <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
         <div class="content blue"></div></el-col>
       </el-row>
     <!-- 代码 4：偏移的分栏 -->
     <h3>偏移的分栏</h3>
     <el-row :gutter="20">
       <el-col :span="12" :offset="6">
         <div class="content green">:offset="6"</div>
         </el-col>
       </el-row>
     <!-- 代码 5：分栏的对齐方式-->
     <h3>分栏的对齐方式</h3>
     <el-row type="flex" justify="center">
       <el-col :span="6">
        <div class="content red">justify="center"</div>
      </el-col>
       <el-col :span="6">
        <div class="content green"></div>
      </el-col>
       <el-col :span="6">
        <div class="content yellow"></div>
      </el-col>
       </el-row>
     <el-row type="flex" justify="space-around">
       <el-col :span="6">
         <div class="content red">justify="space-around"</div>
         </el-col>
       <el-col :span="6">
        <div class="content green"></div>
      </el-col>
       <el-col :span="6">
        <div class="content yellow"></div>
      </el-col>
       </el-row>
     </div>
   </template>
 <script>
 export default {
   name: 'App'

}
 </script>
 <style>
 .el-row {
   margin-bottom: 20px;
  
}

 .content {
   height: 30px;
   border-radius: 10px;
   line-height: 30px;
   color: white;
   text-align: center;
  
}

 .red {
   background-color: red;
  
}
.green {
   background-color: green;
  
}

 .yellow {
   background-color: yellow;
  
}

 .blue {
   background-color: blue;
  
}
</style>